@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Shimmer animation for sidebar brand */
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
  
  .animate-shimmer {
    animation: shimmer 3s infinite;
  }
}

/* Apple-style Glassmorphism Design */
@layer base {
  :root {
    /* Light mode - 优雅的米白色渐变，带有淡蓝色和淡紫色点缀 */
    --light-gradient-1: #fdfbfb;
    --light-gradient-2: #f5f7fa;
    --light-gradient-3: #ebedee;
    --light-gradient-4: #fef9f8;
    
    /* Dark mode - 深蓝色渐变 */
    --dark-gradient-1: #0a1929;
    --dark-gradient-2: #132f4c;
    --dark-gradient-3: #1e3a5f;
    --dark-gradient-4: #0d2847;
  }
  
  body {
    @apply bg-gradient-to-br from-[var(--light-gradient-1)] via-[var(--light-gradient-2)] to-[var(--light-gradient-3)];
    @apply bg-[length:400%_400%];
    @apply animate-gradient;
    @apply min-h-screen;
  }
  
  /* 浅色模式文字颜色 */
  body {
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-tertiary: #718096;
  }
  
  /* Dark mode - 深蓝色渐变 */
  .dark body {
    @apply from-[var(--dark-gradient-1)] via-[var(--dark-gradient-2)] to-[var(--dark-gradient-4)];
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.9);
    --text-tertiary: rgba(255, 255, 255, 0.7);
  }
}

/* Gradient animation */
@keyframes gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  animation: gradient 15s ease infinite;
}

/* Glassmorphism utilities */
@layer utilities {
  /* Glass effect - 浅色模式 */
  .glass {
    @apply bg-white/70 backdrop-blur-xl backdrop-saturate-150;
    @apply border border-gray-200/40 rounded-2xl;
    @apply shadow-[0_8px_32px_0_rgba(99,102,241,0.08)];
  }
  
  /* Glass effect - 深色模式 */
  .dark .glass {
    @apply bg-white/10 backdrop-blur-lg backdrop-saturate-150;
    @apply border border-white/20 rounded-2xl;
    @apply shadow-[0_8px_32px_0_rgba(0,0,0,0.3)];
  }
  
  /* Glass navbar - 浅色模式 */
  .glass-navbar {
    @apply fixed top-0 left-0 right-0 z-50;
    @apply bg-white/75 backdrop-blur-[24px] backdrop-saturate-150;
    @apply border-b border-gray-200/40;
    @apply transition-all duration-300;
    @apply shadow-sm;
  }
  
  .glass-navbar.scrolled {
    @apply backdrop-blur-[32px] bg-white/85;
    @apply shadow-md;
  }
  
  /* Glass navbar - 深色模式 */
  .dark .glass-navbar {
    @apply bg-white/[0.08] border-white/20 shadow-none;
  }
  
  .dark .glass-navbar.scrolled {
    @apply bg-white/[0.15];
  }
  
  /* Glass scrollbar */
  .glass-scrollbar::-webkit-scrollbar {
    @apply w-2;
  }
  
  .glass-scrollbar::-webkit-scrollbar-track {
    @apply bg-white/5 backdrop-blur-md rounded-full;
  }
  
  .glass-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-white/20 backdrop-blur-md rounded-full;
    @apply hover:bg-white/30;
  }
}

/* Gradient text effect */
.gradient-text {
  @apply bg-clip-text text-transparent;
  @apply bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400;
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out;
}

/* 统一的 select 下拉框样式 */
select {
  @apply bg-white/60 dark:bg-gray-800;
  @apply text-gray-900 dark:text-white;
  @apply border border-gray-300/40 dark:border-white/20;
}

select option {
  @apply bg-white dark:bg-gray-800;
  @apply text-gray-900 dark:text-white;
}

